<template>
  <div id="app">
  <transition name="fade" enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutDown">
    <router-view/>
  </transition>
  <em class="ic_audio" :class='{not:not}' @click="quite"></em>
  <audio ref="aud" :src='music_url' autoplay="autoplay"></audio>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
  	return{
  		music_url:'static/music/bgm.mp3',
  		not:false//静音
  	}
  },
  methods:{
  	quite(){
  		//静音
  		this.not=!this.not;
  		if(this.not){
  			this.$refs.aud.pause();
  		}else{
  			this.$refs.aud.play();
  		}
  	},
  	unload(){
  		//页面关闭执行的事件
  		socket.emit('miss',{
					name:this.$store.state.name,
					room:this.$store.state.room
				})
  	}
  },
  mounted(){
  	socket.on('userin',(data)=>{
//				console.log(data);
				let users=data.users;
				this.$store.commit('change',{
					key:'users',
					value:users
				})
			}),
			window.addEventListener('beforeunload',e=>{
				this.unload();
			})
  }
}
</script>

<style scoped="scoped" lang="scss">
	#app{
		 position: absolute;
		 top:0;
		 bottom:0;
		 left:0;
		 right:0;
		 margin: auto;
		 max-width: 750px;
		 width:100%;
		 height: 100%;
		 background: #f1f1f1 url(assets/image/wrap_bg.jpeg) no-repeat;
		 background-size:cover;
		 em.ic_audio{
	 	 		width: 30px;
        height: 30px;
        display: block;
        background:url(assets/image/audio.png) no-repeat;
        background-size: 30px 30px;
        position: absolute;
        top: 20px;
        right: 20px;
        &.not {
            background: url(assets/image/audio_not.png) no-repeat;
            background-size: 30px 30px !important;
        }
		 }
	}
</style>
